import React, { Component } from 'react';
import { Image,TouchableOpacity } from 'react-native';
import { Container, Header, Title, Content, Footer, FooterTab, Button,Thumbnail,
   Left, Right, Body, Icon, Text,Card,CardItem,Badge } from 'native-base';
import Commentaries from './Commentaries';
import AppState from './AppState';
import { observer } from 'mobx-react/native';

@observer
export default class FirstPage extends Component {
  constructor(){
    super();
  }

  getHomeData = async ()=>{
      return await fetch('http://localhost:9999/',
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: 'cmd=GetHomeData'
      });
  }
  componentWillMount(){
    this.getHomeData().then((response) => response.json())
    .then((responseJson) => {
      console.log(responseJson);
      AppState.HomeData = responseJson;
    })
    .catch((error) => {
      console.error(error);
    });
  }
  clickLikes = async (hid) =>{
    await fetch('http://localhost:9999/',
    {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: 'cmd=ClickLikes&hid='+hid
    }).then((response) => {
      return response.text();
    }).then((responseText)=>{//写到这里 6:37
      //console.log(responseText);
      if(responseText==="success"){
        for(let value of AppState.HomeData){
          if(value.hid===hid){
             value.likes+=1;
             break;
          } 
         }
      }
    }).catch((error) => {
      console.error(error);
    });
    
  }
  render() {
    const host = "http://106.14.127.114:9999/";
    const {HomeData} = AppState;
    return (
      <Container>
        <Header>
          <Left>
            <Button transparent>
              <Icon name='menu' />
            </Button>
          </Left>
          <Body>
            <Title>Header</Title>
          </Body>
          <Right>
            <Button transparent>
              <Icon name='ios-add' />
            </Button>
          </Right>
        </Header>
        <Content>

        <Card>
         <CardItem>
          <Body>
            <Button iconLeft light>
              <Icon name="home" />
              <Text>Home</Text>
            </Button>
          </Body>
          </CardItem>
        </Card>

        {HomeData.map((value,index)=>
        <Card key={index}>
          <CardItem>
            <Left>
              <Thumbnail source={{uri:host+HomeData[index].portrait}} />
              <Body>
                <Text>{HomeData[index].userName}</Text>
                <Text note>{HomeData[index].autograph}</Text>
              </Body>
            </Left>
          </CardItem>
          <CardItem cardBody>
            <Image source={{uri:host+HomeData[index].CoverImage}} style={{height: 200, width: null, flex: 1}}/>
          </CardItem>
          <CardItem>
            <Left>
              <Button transparent onPress={this.clickLikes.bind(this,value.hid)}>
                <Icon active name="thumbs-up" />
                <Text> {HomeData[index].likes} Likes</Text>
              </Button>
            </Left>
            <Body>
              <Button transparent 
              onPress={() => {this.props.navigator.push({
                component:Commentaries,
                title:'评论',
                passProps:{index:HomeData[index].hid}
               })}}>
                <Icon active name="chatbubbles" />
                <Text>{HomeData[index].CommentsSum} Comments</Text>
              </Button>
            </Body>
            <Right>
              <Text>{HomeData[index].ReleaseTime}</Text>
            </Right>
          </CardItem>
        </Card>
        )}


        </Content>
        <Footer>
          <FooterTab>
            <Button active>
              <Icon active name="apps" />
            </Button>
            <Button>
              <Icon name="camera" />
            </Button>
            <Button>
              <Icon name="navigate" />
            </Button>
            <Button badge vertical>
              <Badge><Text>2</Text></Badge>
              <Icon name="person" />
            </Button>
          </FooterTab>
        </Footer>
      </Container>
    );
  }
}